<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>船联网跨省区内河航运数据交换成果展示</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body,
        html {
            margin: 0;
            height: 100%;
        }

        body {
            overflow: hidden;
        }

        ul,
        ol {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #mapbar {
            height: 100vh;
            width: calc(100vw - 16.666667%);
            padding: 0;
            transition: all .3s;
        }

        #MapContainer .mask{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            background-color: rgba(0, 0, 0, .6);
        }

        #pbRight {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            padding: 0;
            overflow-y: auto;
            z-index: 1;
            background-color: rgba(0, 0, 0, .7);
            transition: all .3s;
            color: #fff;
        }

        .switch {
            display: block;
            position: fixed;
            right: 16.7%;
            top: 44%;
            z-index: 20;
            width: 12px;
            height: 71px;
            overflow: hidden;
            background: url('/images/righttrangle.svg') no-repeat center;
            background-size: 80px;
            background-position: -31px -4px;
            cursor: pointer;
            transition: all .3s;
        }

        .date {
            border-top: 1px solid #f1c3f1;
        }

        .ship-alert {
            width: 450px;
            background: #fff;
            background-color: rgba(255, 255, 255, .7);
            filter: alpha(opacity=70);
            filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
            padding: 10px;
            position: absolute;
            display: none;
        }

        .ship-headline {
            padding-bottom: 10px;
        }

        .ship-headline span:first-child {
            font-size: 18px;
            float: left;
        }

        .ship-headline span.close {
            float: right;
            border: 1px solid #999;
            padding: 3px;
            border-radius: 5px;
            font-size: 12px;
            cursor: pointer;
        }

        .ship-alert table {
            box-sizing: content-box;
            width: 100%;
        }

        .ship-alert table tr>td {
            border: 1px solid #999;
            width: 25%;
            padding: 5px;
            font-size: 14px;
        }

        .ship-alert table tr>td:nth-child(2n-1) {
            background-color: rgba(0, 0, 0, .2);
        }

        .mark_pic {
            position: relative;
            width: 35px;
            height: 35px;
            cursor: pointer;
        }

        .mark_pic img {
            width: 35px;
            height: auto;
        }

        .mark_pic span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 10;
            width: 150px;
            padding: 15px;
            text-align: center;
            line-height: 24px;
            background-color: rgba(255, 255, 255, .7);
            border-radius: 10px;
        }
    </style>
    <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
    <script type="text/javascript" src="http://120.27.231.90:8803/mapAPI/getMapLib?nettype=1&customer=lihltest"></script>
</head>

<body>
    <div id="mapbar" class="col-lg-10"></div>
    <div id="legend">
        <ul>
            <li>
                <label>
                    <input onchange="aisList()" checked="true" id="zj" type="checkbox" />
                    <image src="/images/clw/ship_zj.png" />浙江</label>
            </li>
            <li>
                <label>
                    <input onchange="aisList()" checked="true" id="sh" type="checkbox" />
                    <image src="/images/clw/ship_sh.png" />上海</label>
            </li>
            <li>
                <label>
                    <input onchange="aisList()" checked="true" id="js" type="checkbox" />
                    <image src="/images/clw/ship_js.png" />江苏</label>
            </li>
        </ul>
    </div>
    <div id="pbRight" class="col-lg-2">
        <ul class="menu0 clearfix" id="menu0" style="width: 100%">
            <li style="text-align:center;width:100%;padding: 4px 0;">船舶数据信息</li>
            <li class="date"></li>
            <li class="sum"></li>
            <li class="view-sum"></li>
        </ul>
        <div id="main0">

        </div>
    </div>
    <div class="ship-alert" id="shipInfo">
        <div class="ship-headline clearfix">
            <span>船舶信息</span>
            <span class="close">关闭</span>
        </div>
        <table>
            <tbody></tbody>
        </table>
    </div>

    <script type="text/javascript">
        var maplet;
        var apiType = 1;
        var date = new Date();
        var min = 10,
            max = 100,
            delta = 0.02;
        date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        //切换地图
        function ChangeMap(type) {
            //普通地图
            if (type == 1) {
                maplet.showNormalMap();
                document.getElementById("pt").style.display = "none";
                document.getElementById("wx").style.display = "block";
            } else
            //卫星地图
            {
                maplet.showSatelliteMap(false);
                document.getElementById("pt").style.display = "block";
                document.getElementById("wx").style.display = "none";
            }

        }
        //显示路网
        function roadNet() {
            if (document.getElementById("_roadNet").checked) {
                maplet.showRoad({ minLevel: 0, maxLevel: 15 });
            } else {
                maplet.hideRoad();
            }
        }

        var markArray = [],
            ais_list = [],
            ais_polymerize_list = [];

        // 水路数据
        function aisList() {
            clearMark();
            var obj = maplet.getViewBound();
            var leftUp = obj.LeftUp;
            var rightDown = obj.RightDown;
            var zj = document.getElementById('zj').checked ? 1 : 0;
            var sh = document.getElementById('sh').checked ? 1 : 0;
            var js = document.getElementById('js').checked ? 1 : 0;
            var url = 'http://120.55.85.1:8069/proxy_id{A4D33847-672C-4249-B0CB-76CF5C34F7C4}/ais/polymerize?left_top_lon=' + leftUp.split(',')[0] +
                '&left_top_lat=' + leftUp.split(',')[1] +
                '&right_bottom_lon=' + rightDown.split(',')[0] +
                '&right_bottom_lat=' + rightDown.split(',')[1] +
                '&min=' + min + '&max=' + max +
                '&delta=' + delta +
                '&zj=' + zj +
                '&sh=' + sh +
                '&js=' + js +
                '&level=' + maplet.getZoomLevel();
            $.get(url, {}, function (data) {
                ais_list = data.ais_list;
                ais_polymerize_list = data.ais_polymerize_list;
                $('.sum').html('船舶总数：' + data.count[0]);
                $('.view-sum').html('视野内船舶总数：' + data.count[1]);
                singleType();
                for (var i = 0; i < ais_polymerize_list.length; i++) {
                    shipType(ais_polymerize_list[i])
                }
            });
        }

        //单艘船
        function singleType() {
            for (var i = 0; i < ais_list.length; i++) {
                var x = ais_list[i]['gjd'] || ais_list[i]['glon'],
                    y = ais_list[i]['gwd'] || ais_list[i]['glat'],
                    hx = ais_list[i]['hx'] || ais_list[i]['direction'],
                    sf = ais_list[i]['sf'];
                var img = '<img onclick="shipInfoClick(event);" data-index="' + i + '" data-name="' + ais_list[i]['cbmc'] + '" data-mjd="' + ais_list[i]['mjd'] + '" data-mwd="' + ais_list[i]['mwd'] + '" style="cursor:pointer; transform:rotate(' + hx + 'deg);width:35px;" src="/images/clw/ship_' + sf + '.png">';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img),
                    new MInfoWindow("shipInfo", document.getElementById("shipInfo"))
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "iw_beforeopen", showSingleShipInfo);
            }
        }

        //聚合
        function shipType(ais_polymerize_list) {
            var x = ais_polymerize_list[3],
                y = ais_polymerize_list[4],
                ais_sum = ais_polymerize_list[2];
            if (ais_sum > 1 && ais_sum < 10) {
                var img = '<div class="mark_pic"><img src="/images/clw/m1.png"><span>' + ais_sum + '</span></div>';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img)
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "click", function (data) {
                    window.event.stopPropagation();
                    maplet.setCenter(new MPoint(data.pt.lon, data.pt.lat));
                    if (maplet.getZoomLevel() <= 17) {
                        maplet.zoomIn();
                    }
                })
            } else if (ais_sum > 10 && ais_sum < 100) {
                var img = '<div class="mark_pic"><img src="/images/clw/m2.png"><span>' + ais_sum + '</span></div>';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img)
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "click", function (data) {
                    window.event.stopPropagation();
                    maplet.setCenter(new MPoint(data.pt.lon, data.pt.lat));
                    if (maplet.getZoomLevel() <= 17) {
                        maplet.zoomIn();
                    }
                })
            } else if (ais_sum > 100 && ais_sum < 1000) {
                var img = '<div class="mark_pic"><img src="/images/clw/m3.png"><span>' + ais_sum + '</span></div>';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img)
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "click", function (data) {
                    window.event.stopPropagation();
                    maplet.setCenter(new MPoint(data.pt.lon, data.pt.lat));
                    if (maplet.getZoomLevel() <= 17) {
                        maplet.zoomIn();
                    }
                })
            } else if (ais_sum > 1000 && ais_sum < 10000) {
                var img = '<div class="mark_pic"><img src="/images/clw/m4.png"><span>' + ais_sum + '</span></div>';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img)
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "click", function (data) {
                    window.event.stopPropagation();
                    maplet.setCenter(new MPoint(data.pt.lon, data.pt.lat));
                    if (maplet.getZoomLevel() <= 17) {
                        maplet.zoomIn();
                    }
                })
            } else if (ais_sum > 10000) {
                var img = '<div class="mark_pic"><img src="/images/clw/m5.png"><span>' + ais_sum + '</span></div>';
                var markpoly = new MMarker(
                    new MPoint(x, y),
                    new MIcon(img)
                );
                markArray.push(markpoly);
                maplet.addOverlay(markpoly);
                MEvent.addListener(markpoly, "click", function (data) {
                    window.event.stopPropagation();
                    maplet.setCenter(new MPoint(data.pt.lon, data.pt.lat));
                    if (maplet.getZoomLevel() <= 17) {
                        maplet.zoomIn();
                    }
                })
            }
        }

        //聚合半径
        function getDelta() {
            if(window.hasReQuired) window.clearTimeout(window.hasReQuired)
            var level = maplet.getZoomLevel();
            switch (level) {
                case 0:
                    delta = 80;
                    break;
                case 1:
                    delta = 20;
                    break;
                case 2:
                    delta = 16;
                    break;
                case 3:
                    delta = 12;
                    break;
                case 4:
                    delta = 8;
                    break;
                case 5:
                    delta = 4;
                    break;
                case 6:
                    delta = 0.8;
                    break;
                case 7:
                    delta = 0.6;
                    break;
                case 8:
                    delta = 0.3;
                    break;
                case 9:
                    delta = 0.2;
                    break;
                case 10:
                    delta = 0.1;
                    break;
                case 11:
                    delta = 0.05;
                    break;
                case 12:
                    delta = 0.03;
                    break;
                case 13:
                    delta = 0.02;
                    break;
                case 14:
                    delta = 0.01;
                    break;
                case 15:
                    delta = 0.005;
                    break;
                case 16:
                    delta = 0.004;
                    break;
                case 17:
                    delta = 0.003;
                    break;
                case 18:
                    delta = 0.002;
                    break;
                default:
                    alert('请查询地图层级');
                    break;
            }
            window.hasReQuired = setTimeout(function(){
                aisList();
            }, 300)
        }

        //船舶窗口
        function showSingleShipInfo(overlay, x, y) {
            window.event.stopPropagation();
            $("#shipInfo").show();
            var options = {
                pin: true,
                zindex: 20,
                content: overlay.info.content,
                location: { type: "xy", x: x, y: y },
                zoomhide: true
            };
            p = new MPanel(options);
            MPanel.enableDragMap(p.dom, true);
            maplet.addPanel(p);
        }

        // 单艘船舶详细信息
        function shipInfoClick(evt) {
            $("#shipInfo").css("display", "block");
            var src = evt.srcElement || evt.target;
            var mc = src.getAttribute('data-name'),
                mjd = src.getAttribute('data-mjd'),
                mwd = src.getAttribute('data-mwd'),
                i = src.getAttribute('data-index'),
                ship_info = '';
            var xxlx = "";
            switch (ais_list[i]['xxlx']) {
                case 0:
                    xxlx = "融合";
                    break;
                case 1:
                    xxlx = "GPS";
                    break;
                case 2:
                    xxlx = "AIS";
                    break;
                default:
                    xxlx = '其他'
            }
            ship_info = '<tr><td>船舶名称</td><td>' + (ais_list[i]['cbmc'] != undefined? ais_list[i]['cbmc'] : ais_list[i]['name']) + '</td>' +
                '<td>经度</td><td>' + (ais_list[i]['gjd'] != undefined? ais_list[i]['gjd'] : ais_list[i]['glon']) + '</td></tr>' +
                '<tr><td>速度</td><td>' + (ais_list[i]['sd'] != undefined? ais_list[i]['sd'] : ais_list[i]['sog']) + '</td>' +
                '<td>纬度</td><td>' + (ais_list[i]['gwd'] != undefined? ais_list[i]['gwd'] : ais_list[i]['glat']) + '</td></tr>' +
                '<tr><td>航向</td><td>' + (ais_list[i]['hx'] != undefined? ais_list[i]['hx'] : ais_list[i]['direction']) + '</td>' +
                '<tr><td>数据更新时间</td><td>' + (ais_list[i]['gxsj'] != undefined? ais_list[i]['gxsj'] : ais_list[i]['eta']) + '</td>' +
                '<td>AIS识别号</td><td>' + (ais_list[i]['ais_zdh'] != undefined? ais_list[i]['ais_zdh'] : ais_list[i]['imo']) + '</td></tr>' +
                '<tr><td>消息类型</td><td>' + xxlx + '</td>' +
                '<td>GPS设备号</td><td>' + (ais_list[i]['gps_zdh'] != undefined? ais_list[i]['gps_zdh'] : ais_list[i]['mmsi']) + '</td></tr>';
            $("#shipInfo tbody").empty().append(ship_info.replace(/undefined/g, '无'));
            $(".close").click(function () {
                $("#shipInfo").hide();
            });
        }

        function clearMark() {
            console.log('clear')
            console.log(markArray.length)
            for (var i in markArray) {
                maplet.clearOverlays(markArray[i]);
            }
            markArray = [];
        };


        $(function () {
            //地图部分
            var width = $('#mapbar')[0].clientWidth;
            var height = $('#mapbar').height();
            maplet = new Maplet("mapbar");
            maplet.centerAndZoom(new MPoint(120.15518, 30.27304), 12);
            maplet.addControl(new MStandardControl());
            maplet.clickToCenter = false;
            maplet.customInfoWindow = true;
            $('#MapContainer').append('<div class="mask"></div>')
            // maplet.resize(width, height);
            //设置信息窗口宽高。  
            maplet.setIwStdSize(539, 360);
            var maptab = '<div id="MapTab" style="position: absolute; z-index: 9999; width: 52px; height: 100px; right: 20px; top: 20px; ">' +
                '<div id="wx"><a href="#" onclick="ChangeMap(2)">' +
                '<image src="/images/wx.png"></image></a></div>' +
                '<div id="pt" style="display: none"><a href="#" onclick="ChangeMap(1)">' +
                '<image src="/images/pt.png"></image></a>' +
                '<p><span><input type="checkbox" id="_roadNet" name="_roadNet" onclick="roadNet();"/><font color="#fffaf0">路网</font></span></div>' +
                '</div>';
            $('#mapbar').append(maptab);
            aisList();
            MEvent.addListener(maplet, "zoom", function () {
                getDelta();
            });
            MEvent.addListener(maplet, 'pan', function () {
                getDelta();
            });

            $('#ImgCopyright').hide();
            $('#ImgCopyright').next().hide();


            //右边栏数据部分
            $('.date').html(date);

            setInterval(function () {
                aisList();
            }, 6000);
        })
    </script>
</body>

</html>